<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></script>
<title>js-2dmath: Some Vec2 functions in action</title>

<script src="../dist/js-2dmath-browser.min.js" type="text/javascript" ></script>
<!--
<script src="../debug/js-2dmath-browser-debug.js" type="text/javascript" ></script>
-->

</head>
<body>
<h1>js-2dmath: Some Vec2 functions in action</h1>
<canvas id="canvas" width="640" height="480" style="border: 1px solid red;"></canvas>
<canvas id="canvas2" width="640" height="480" style="border: 1px solid red;"></canvas>
</body>
</html>

<script>
//
// --- INIT ---
//
//expose js-2dmath globally, I'm lazy!
require("js-2dmath").globalize(window);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
Draw.invertAxis(canvas, ctx); // y-up
ctx.translate(canvas.width * 0.5, canvas.height * 0.5); // center
Draw.cartesianAxis(ctx, 320, 16); // coordinates

var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
Draw.invertAxis(canvas2, ctx2); // y-up
ctx2.translate(canvas2.width * 0.5, canvas2.height * 0.5); // center
Draw.cartesianAxis(ctx2, 320, 16); // coordinates
console.log(ctx2);
//
//
//


var v = Vec2.create(50, 50),
    a = Vec2.create(100, 75),
    b = Vec2.create(100, 0),
    aux = [0, 0];


Draw.vec2(ctx, v, "red");
Draw.text(ctx, "vec2", Vec2.add([0, 0], v, [7,7]));
console.log(v);

Vec2.perp(aux, v);
console.log(aux);
Draw.vec2(ctx, aux, "blue");
Draw.text(ctx, "prep", Vec2.add([0, 0], aux, [7,7]));

Vec2.rperp(aux, v);
console.log(aux);
Draw.vec2(ctx, aux, "green");
Draw.text(ctx, "rperp", Vec2.add([0, 0], aux, [7,7]));


Draw.vec2(ctx, a, "red");
Draw.text(ctx, "a", Vec2.add([0, 0], a, [7,7]));

Draw.vec2(ctx, b, "red");
Draw.text(ctx, "b", Vec2.add([0, 0], b, [7,7]));

Vec2.interpolate(aux, a, b, 2)
console.log(aux);
Draw.vec2(ctx, aux, "red");
Draw.text(ctx, "interpolate(a,b,2)", Vec2.add([0, 0], aux, [7,7]))


Vec2.interpolate(aux, a, b, 3)
console.log(aux);
Draw.vec2(ctx, aux, "red");
Draw.text(ctx, "interpolate(a,b,3)", Vec2.add([0, 0], aux, [7,7]))

Vec2.interpolate(aux, b, a, 2)
console.log(aux);
Draw.vec2(ctx, aux, "red");
Draw.text(ctx, "interpolate(b,a,2)", Vec2.add([0, 0], aux, [7,7]))

aux = [50, 50];
Draw.vec2(ctx2, aux, "red");
var angle = Vec2.angleTo([0, 0], aux) * Math.RAD_TO_DEG;
console.log(Math.RAD_TO_DEG);
console.log(Vec2.angleTo([100, 0], aux));
console.log(angle);
Draw.text(ctx2, "angleTo=" + angle.toFixed(2), Vec2.add([0, 0], aux, [7,7]))

var v1 = [25, 25];
var v2 = [0, 1];
var rotv = Vec2.rotateVec([0, 0], v1, v2);
Draw.vec2(ctx2, v1, "blue");
Draw.vec2(ctx2, v2, "blue");
Draw.vec2(ctx2, rotv, "blue");
Draw.text(ctx2, "rotateVec()", rotv)
console.log(rotv);


var refv = Vec2.reflect([0, 0], v1, v2);
Draw.text(ctx2, "reflect()", refv)
console.log(refv);

</script>